<template>
  <div
    v-loading="!config.info"
    element-loading-text="正在获取数据"
    style="min-height: 100px"
  >
    <div v-if="config.info">
      <el-alert
        v-if="infos.alert"
        type="error"
        show-icon
        :closable="false"
        style="letter-spacing: 2px; height: 50px; margin-top: 10px"
      >
        <b>设备触发异常</b>
        <el-button
          type="warning"
          style="right: 10px; top: 10px; position: absolute"
          @click="server_api.afe_clear_alert()"
        >
          清除异常
        </el-button>
      </el-alert>
      <!-- 大 - 信息 -->
      <el-row>
        <el-col
          v-for="(data, key) in top_row"
          :key="key"
          :span="10"
          :offset="data.offset ? data.offset : 1"
        >
          <el-card class="top-info">
            <el-row>
              <el-col :span="5">
                <SvgIcon :icon="data.icon" style="font-size: 2.5em" />
              </el-col>
              <el-col :span="17" :offset="1">
                <span>{{ unit_process(infos[key], data.unit) }}</span>
                <br />
                {{ data.title }}
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <!-- 每节电池电压 -->
      <el-row>
        <el-col :span="22" :offset="1">
          <el-card class="small-info">
            <p>
              <span> 电池电压 </span>
              <el-tag style="position: absolute; right: 30px">
                {{ (infos.bat_diff / 1000).toFixed(3) }} V
              </el-tag>
              <el-tag style="position: absolute; left: 30px">
                {{ bat_voltage() }} V
              </el-tag>
            </p>
            <el-row
              v-for="(data, idx) in infos.bat"
              :key="idx"
              style="margin-top: 10px; align-items: center"
            >
              <el-col :span="2">{{ idx }}</el-col>
              <el-col :span="11">
                <SvgIcon
                  icon="bat"
                  style="font-size: 2em; width: 100%; margin-left: -70%"
                />
              </el-col>
              <el-col :span="11">
                <span>{{ infos.bat[idx] }} V</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <!-- 小 - 信息 -->
      <el-row v-for="(info, idx) in info_row" :key="idx">
        <el-col v-for="(data, key) in info" :key="key" :span="7" style="margin: 2%">
          <el-card class="small-info">
            <el-row style="margin-top: 5px; align-items: center">
              <SvgIcon :icon="data.icon" style="font-size: 1.5em; margin-right: 10px" />
              {{ data.title }}
            </el-row>
            <el-row style="margin-top: 10px; justify-content: center">
              <el-col v-if="data?.onone">{{
                unit_process(infos[key], data.unit)
              }}</el-col>
              <el-col v-if="!data?.onone">{{
                unit_process(infos[key], data.unit).split(" ")[0]
              }}</el-col>
              <el-col v-if="!data?.onone">{{
                unit_process(infos[key], data.unit).split(" ")[1]
              }}</el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <!-- 可按按键 -->
      <div style="display: flex; justify-content: center; flex-flow: wrap">
        <el-tooltip
          placement="top"
          v-for="(item, key) in button_type1"
          :key="key"
          :content="item.label"
        >
          <el-button
            :type="infos.state[key] ? 'primary' : 'info'"
            :plain="infos.state[key] ? false : true"
            :disabled="item?.disable ? true : false"
            v-loading="item?.key ? server_api.ticks[item.key] > 0 : false"
            @click="item.onClick"
            style="width: 50px; height: 50px; margin: 5px"
            circle
          >
            <SvgIcon :icon="key" style="font-size: 2em" />
          </el-button>
        </el-tooltip>
        <!-- 仅状态显示-按钮 -->
        <el-tooltip
          placement="top"
          v-for="(data, key) in button_type2"
          :key="key"
          :content="data"
        >
          <el-button
            :type="infos.state[key] ? 'danger' : 'primary'"
            circle
            plain
            disabled
            style="width: 50px; height: 50px; margin: 5px"
          >
            <SvgIcon :icon="key" style="font-size: 2em" />
          </el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import store from "~/utils/store";
import server_api from "~/utils/server_api";

const config = toRef(store);

const infos = computed(() => {
  return config.value?.server?.infos;
});

/* 大 - 显示信息 */
const top_row = {
  voltage: {
    icon: "voltage",
    unit: "V",
    title: "电压",
  },
  current: {
    icon: "current",
    unit: "A",
    title: "电流",
    offset: 2,
  },
  power: {
    icon: "power",
    unit: "W",
    title: "功率",
  },
  rtime: {
    icon: "time",
    unit: time_to_date,
    title: "剩余时间",
    offset: 2,
  },
  bat_ah: {
    icon: "bat_ah",
    unit: "mAH",
    title: "容量",
  },
  bat_rah: {
    icon: "bat_rah",
    unit: "mAH",
    title: "剩余容量",
    offset: 2,
  },
};

/* 小 - 显示信息 */
const info_row = [
  /* 每行最多3个 */
  {
    mWh: {
      icon: "mWh",
      unit: "mWH",
      title: "累计电量",
    },
    mWh_chg: {
      icon: "mWh",
      unit: "mWH",
      title: "今日充电",
    },
    mWh_dsg: {
      icon: "mWh",
      unit: "mWH",
      title: "今日放电",
    },
  },
  {
    mAh: {
      icon: "mAh",
      unit: "mAH",
      title: "累计容量",
    },
    mAh_chg: {
      icon: "mAh",
      unit: "mAH",
      title: "今日充容",
    },
    mAh_dsg: {
      icon: "mAh",
      unit: "mAH",
      title: "今日放容",
    },
  },
  {
    temp: {
      icon: "temp",
      unit: "℃",
      title: "外部温度",
      onone: true,
    },
    mcu_temp: {
      icon: "temp",
      unit: "℃",
      title: "AFE温度",
      onone: true,
    },
    time: {
      icon: "time",
      unit: time_to_date,
      title: "启动时间",
      onone: true,
    },
  },
];

/* 可开关按键 */
const button_type1 = {
  CHG: {
    label: "充电开关",
    key: "afe_set_chg",
    onClick: () => {
      server_api.afe_set_chg(!infos.value.state.CHG);
    },
  },
  DSG: {
    label: "放电开关",
    key: "afe_set_dsg",
    onClick: () => {
      server_api.afe_set_dsg(!infos.value.state.DSG);
    },
  },
  AE: {
    label: "主动均衡",
    key: "afe_set_ae",
    onClick: () => {
      server_api.afe_set_ae(!infos.value.state.AE);
    },
  },
  Load: {
    label: "负载接入",
    disable: true,
    onClick: () => {},
  },
};
/* 仅状态, 不可按 */
const button_type2 = {
  OCD: "放电过流",
  SCD: "放电短路",
  UV: "单节电池欠压",
  OV: "单节电池过压",
  OCC: "充电过流",
  Alert: "报警",
  CS: "电流传感器状态",
  VS: "电压传感器状态",
};

/* 显示内容 + 单位转换 + 仅保留2位小数点 */
function unit_process(value: any, unit: string | ((value: any) => string)) {
  if (typeof unit === "function") {
    return unit(value);
  } else {
    for (let i = 0; i < 3; i++) {
      let value_num = Math.abs(value);
      if (value_num < 1.0) {
        value *= 1000;
        if (unit === "AH") unit = "mAH";
        else if (unit === "WH") unit = "mWH";
        else if (unit === "A") unit = "mA";
        else if (unit === "W") unit = "mW";
        else if (unit === "mAH") unit = "uAH";
        else if (unit === "mWH") unit = "uWH";
        else if (unit === "mA") unit = "uA";
        else if (unit === "mW") unit = "uW";
      } else if (value_num >= 1000.0) {
        value /= 1000;
        if (unit === "uAH") unit = "mAH";
        else if (unit === "uWH") unit = "mWH";
        else if (unit === "uA") unit = "mA";
        else if (unit === "uV") unit = "mV";
        else if (unit === "mAH") unit = "AH";
        else if (unit === "mWH") unit = "WH";
        else if (unit === "mA") unit = "A";
        else if (unit === "mV") unit = "V";
      } else break;
    }
    if (!Number.isInteger(value)) value = value.toFixed(2);
    return `${value} ${unit}`;
  }
}

/* 时间转文字 */
function time_to_date(time: number) {
  let sec = parseInt((time / 1000).toString());
  let min = parseInt((sec / 60).toString());
  let hour = parseInt((min / 60).toString());
  let day = parseInt((hour / 24).toString());
  if (day) return `${day} ${hour % 24}:${min % 60}:${sec % 60}`;
  if (hour) return `${hour}:${min % 60}:${sec % 60}`;
  return `${min}:${sec % 60}`;
}

function bat_voltage() {
  let voltage = 0;
  for (let i = 0; i < infos.value?.bat?.length; i++) voltage += infos.value.bat[i];
  return voltage.toFixed(2);
}
</script>

<style scoped>
:deep(.el-col) {
  margin-top: 10px;
}
:deep(.el-card .el-col) {
  margin-top: 0;
}
:deep(.top-info .el-card__body) {
  padding-left: 10px;
  padding-right: 0;
}
:deep(.small-info .el-card__body) {
  padding: 3px;
}
</style>
